﻿<template>
  <a-drawer
    :title="title"
    width="90%"
    :visible="visible"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="客户编码" prop="cCusCode">
            <a-input :disabled="disabled" v-model="entity.cCusCode" autocomplete="off" placeholder="客户编码" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="客户名称" prop="cCusName">
            <a-input :disabled="disabled" v-model="entity.cCusName" autocomplete="off" placeholder="客户名称" />
          </a-form-model-item>
        </a-col>

        <a-col :span="8">
          <a-form-model-item label="电话 " prop="cCusPhone">
            <a-input :disabled="disabled" v-model="entity.cCusPhone" autocomplete="off" placeholder="电话 " />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="银行账号">
            <a-input :disabled="disabled" v-model="entity.cCusAccount" autocomplete="off" placeholder="银行账号" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="开户银行">
            <a-input :disabled="disabled" v-model="entity.cCusBank" autocomplete="off" placeholder="开户银行" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="联系人" prop="cCusPerson">
            <a-input :disabled="disabled" v-model="entity.cCusPerson" autocomplete="off" placeholder="联系人" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="省/直辖市" prop="cProvince">
            <a-select
              showSearch
              :filter-option="filterOption"
              v-model="entity.cProvince"
              default-value="省/直辖市"
              style="width:100%"
              @change="city($event)"
            >
              <a-select-option v-for="(item, dei) in list" :key="item.Id" :value="item.Id">
                {{ item.Name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="市" prop="cCity">
            <a-select
              showSearch
              :filter-option="filterOption"
              v-model="entity.cCity"
              default-value="市"
              style="width:100%"
              @change="village($event)"
            >
              <a-select-option v-for="(item, dei) in listChildren" :key="item.Id" :value="item.Id">
                {{ item.Name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :span="8">
          <a-form-model-item label="区县" prop="cCounty">
            <a-select
              showSearch
              :filter-option="filterOption"
              v-model="entity.cCounty"
              default-value="选择县级"
              style="width:100%"
            >
              <a-select-option v-for="(item, dei) in county" :key="item.Id" :value="item.Id">
                {{ item.Name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-model-item label="地址" prop="cCusAddress">
            <a-textarea :disabled="disabled" v-model="entity.cCusAddress" autocomplete="off" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="客户来源">
            <a-input :disabled="disabled" v-model="entity.CustomerOrigin" autocomplete="off" placeholder="客户来源" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8">
          <a-form-model-item label="备注" prop="Remark">
            <a-input :disabled="disabled" v-model="entity.cMemo" autocomplete="off" placeholder="备注" />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button @click="close">取消</a-button>&nbsp;
      <a-button type="primary" v-if="title != '详情'" @click="handleSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import Alluser from '@/components/UserSample/List.vue'
export default {
  props: {
    parentObj: Object,
    disabled: { type: Boolean, required: false, default: false }
  },
  components: {
    Alluser
  },
  data() {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      list: [], //省级
      listChildren: [], //市
      county: [], //县
      visible: false,
      loading: false,
      entity: {},
      rules: {
        cCusName: [{ required: true, message: '未输入', trigger: 'blur' }],
        cCusCode: [{ required: true, message: '未输入', trigger: 'blur' }],
        cCusPhone: [{ required: true, message: '未输入', trigger: 'blur' }],
        cCusAddress: [{ required: true, message: '未输入', trigger: 'blur' }],
        cCusPerson: [{ required: true, message: '未输入', trigger: 'blur' }],
        cProvince: [{ required: true, message: '未输入', trigger: 'change' }],
        cCity: [{ required: true, message: '未输入', trigger: 'change' }],
        cCounty: [{ required: true, message: '未输入', trigger: 'change' }]
      },
      title: ''
    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    //市级change
    city(e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=' + e, {}).then(resJson => {
        this.loading = false
        this.listChildren = resJson.Data
        // this.$set(this.entity, 'cCusAddress', this.entity.cProvince)
        //console.log('333', this.listChildren)
      })
    },

    //县change
    village(e) {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=' + e, {}).then(resJson => {
        //console.log('res', resJson)
        this.loading = false

        this.county = resJson.Data
        //console.log('333', this.county)
      })
    },
    //获取省份信息
    getlist() {
      this.$http.post('/Base_BasicData/Base_District/GetDataListByPId?pId=0', {}).then(resJson => {
        this.loading = false
        this.list = resJson.Data

        // this.getlistUser()
      })
    },
    close() {
      this.visible = false

      this.entity = {}
    },
    init() {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
    },
    openForm(id, title) {
      this.init()

      this.title = title
      if (id) {
        this.loading = true

        this.$http.post('/CustomerManagement/Cust_CustomerInfoPotential/GetTheData', { id: id }).then(resJson => {
          this.loading = false

          this.entity = resJson.Data
          this.city(this.entity.cProvince)
          this.village(this.entity.cCity)
        })
      }
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/CustomerManagement/Cust_CustomerInfoPotential/SaveData', this.entity).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    }
  }
}
</script>
